<template>
    <div class="left-nav">
        <header>
            <img src="/public/img/leftnav-title.png" alt="">
        </header>
        <main>
            <el-tooltip
                    class="box-item"
                    effect="dark"
                    content="首页"
                    placement="right"
                >
                <span @click="changePage('/index')" :style="{color : ($route.name=='index'?'blue':'')}">
                    <el-icon class="left-nav-icon"><HomeFilled /></el-icon>
                </span>
            </el-tooltip>
            <span class="sp1">
                <el-icon class="left-nav-icon"><Tools /></el-icon>
                <div class="dm1">
                    <DropdownMenu1 :arr-num= arrNum />
                </div>
            </span>
        
            <span class="sp2">
                <el-icon class="left-nav-icon"><DataLine /></el-icon>
                <div class="dm2">
                    <DropdownMenu2 :arr-num= arrNum />
                </div>
            </span>
            
            <span class="sp3">
                <el-icon class="left-nav-icon"><Briefcase /></el-icon>
                <div class="dm3">
                    <DropdownMenu3 :arr-num= arrNum />
                </div>
            </span>
            <el-tooltip
                    class="box-item"
                    effect="dark"
                    content="官网"
                    placement="right"
                >
                <span @click="toAbout()">
                    <el-icon class="left-nav-icon"><Position /></el-icon>
                </span>
            </el-tooltip>
        </main>
    </div>
</template>

<script setup>
import DropdownMenu1 from './DropdownMenu1.vue';
import DropdownMenu2 from './DropdownMenu2.vue';
import DropdownMenu3 from './DropdownMenu3.vue';
import { useRouter } from 'vue-router';
const arrNum = 1;
const router = useRouter();
function changePage(pageUrl){ 
    router.push(pageUrl);
}
function toAbout() {
    router.push('/about');
}

</script>

<style scoped>
.left-nav{background-color: #304156; width: 50px; height: 950px;}
.left-nav header{margin: 20px 0; text-align: center; font-size: 20px; color: #fff; font-weight: 600;}
.left-nav header img{vertical-align: middle;}
main{height: 850px;}
main span{display: block; width: 50px; height: 50px; color: #fff; background-color: #304156;cursor: pointer; position: relative;}
main span .left-nav-icon{width: 50px; margin-top: 15px;}
main span .left-nav-arr{display: inline-block;}
main span:hover{background-color: #2d3d51;}
.dm1,.dm2,.dm3{position: absolute; left: 50px; top: 0; width: 240px; height: 100px; display: none;}
.sp1:hover> .dm1{display: block; z-index: 999;}
.sp2:hover> .dm2{display: block; z-index: 999;}
.sp3:hover> .dm3{display: block; z-index: 999;}
</style>